<!--安全管理评估-显示-->
<template>
  <div class="page">
    <div class="top-search">
      <div class="top-search-item">
        <el-button type="primary">导出数据</el-button>
      </div>
      <div class="top-search-item">
        <el-input placeholder="请输入评估名称关键字" />
      </div>
      <div class="top-search-item">
        <el-button type="primary">检索</el-button>
      </div>
    </div>
    <div class="content">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="序号"
          align="center"
        />
        <el-table-column
          label="评估名称"
          align="center"
        />
        <el-table-column
          label="评估模型"
          align="center"
        />
        <el-table-column
          label="企业名称"
          align="center"
        />
        <el-table-column
          label="责任人"
          align="center"
        >
          <template slot-scope="scope">
            <div class="text-green" @click="DialogHandleClick(scope.row)">
              {{ scope.row.person }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="联系电话"
          align="center"
        />
        <el-table-column
          label="评估时间"
          align="center"
        />
        <el-table-column
          label="评估总分"
          align="center"
        />
        <el-table-column
          label="评估结果"
          align="center"
        />
        <el-table-column
          label="V=100"
          align="center"
        />
        <el-table-column
          label="85≤V≥100"
          align="center"
        />
        <el-table-column
          label="75≤V≥85"
          align="center"
        />
        <el-table-column
          label="60≤V≥75"
          align="center"
        />
        <el-table-column
          label="V≤60"
          align="center"
        />
        <el-table-column
          label="备注"
          align="center"
        />
      </el-table>
    </div>
    <div class="bottom-content">
      <div class="bottom-content-left">
        <div>
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              label="序号"
              align="center"
            />
            <el-table-column
              label="评估专家"
              align="center"
            />
            <el-table-column
              label="评估结果"
              align="center"
            />
          </el-table>
        </div>
      </div>
      <div class="bottom-content-right">
        <div class="bottom-content-right-top">
          <div class="bottom-content-right-top-item">
            <el-button type="primary" size="mini">导出Excel文件</el-button>
          </div>
          <div class="bottom-content-right-top-item">
            <el-button type="primary" size="mini">全部展开</el-button>
          </div>
          <div class="bottom-content-right-top-item">
            <el-button type="primary" size="mini">全部折叠</el-button>
          </div>
        </div>
        <div class="bottom-content-right-bottom">
          <el-table
            :data="tableData1"
            style="width: 100%"
            row-key="id"
            border
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
            <el-table-column
              label="评定项目"
              prop="date"
            />
            <el-table-column
              label="评定内容"
              prop="name"
            />
            <el-table-column
              label="检查依据"
            />
            <el-table-column
              label="检查方式"
            />
            <el-table-column
              label="检查情况"
            />
            <el-table-column
              label="问题及反馈"
            >
              <template slot-scope="scope">
                <div class="text-green" @click="editorDialogHandleClick(scope.row)">
                  {{ scope.row.dialog }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="实际得分"
            />
            <el-table-column
              label="标准分值"
            />
            <el-table-column
              label="权重"
            />
            <el-table-column
              label="整改情况"
            />
          </el-table>
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <el-dialog
      title="弹窗"
      :visible.sync="dialogVisible"
      width="30%"
      :modal="false"
    >
      <div>
        内容
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑器弹窗 -->
    <el-dialog
      title="编辑器弹窗"
      :visible.sync="editorDialogVisible"
      width="30%"
      :modal="false"
    >
      <div>
        <!-- 工具栏 -->
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :default-config="toolbarConfig"
        />
        <!-- 编辑器 -->
        <Editor
          v-model="html"
          style="height: 400px; overflow-y: hidden;"
          :default-config="editorConfig"
          @onChange="onChange"
          @onCreated="onCreated"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editorDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editorDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/**
 * 编辑器采用 wangEditor Vue2版本
 * 文档地址: https://www.wangeditor.com
 */
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
  components: { Editor, Toolbar },
  data() {
    return {
      tableData: [
        {
          person: 'XX'
        }
      ],
      multipleSelection: [],
      tableData1: [{
        id: 1,
        date: '1',
        name: 'A',
        children: [{
          id: 12,
          date: '11',
          name: 'A1',
          dialog: 'XX'
        }, {
          id: 13,
          date: '12',
          name: 'A2'
        }]
      }, {
        id: 2,
        date: '2',
        name: 'B'
      }],
      dialogVisible: false,
      editorDialogVisible: false,
      // 富文本编辑器相关
      editor: null,
      html: '<p>hello</p>',
      toolbarConfig: {
        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
      },
      editorConfig: {
        placeholder: '请输入内容...',
        // autoFocus: false,
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {}
      },
      mode: 'default' // or 'simple'
    }
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
    }, 1500)
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 树形数据懒加载
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
        ])
      }, 1000)
    },
    // 弹窗
    DialogHandleClick() {
      this.dialogVisible = true
    },
    // 富文本
    onCreated(editor) {
      this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
    },
    onChange(editor) {
      console.log('onChange', editor.getHtml()) // onChange 时获取编辑器最新内容
    },
    insertTextHandler() {
      const editor = this.editor
      if (editor == null) return
      editor.insertText(' hello ')
    },
    editorDialogHandleClick() {
      this.editorDialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  padding: 1rem;

  .top-search {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;

    .top-search-item {
      margin-right: 1rem;
    }
  }

  .content {
    margin-top: 2rem;
    width: 100%;
    height: 20rem;
  }
  .bottom-content {
    margin-top: 2rem;
    width: 100%;
    height: 22rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    .bottom-content-left {
      width: 20%;
      height: 22rem;
      padding-right: .5rem;
      margin-top: .5rem;
    }
    .bottom-content-right {
      border-left: 1px dashed #E4E7ED;
      width: 80%;
      height: 22rem;
      padding: 0 .5rem;
      .bottom-content-right-top {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        .bottom-content-right-top-item {
          margin-right: 1rem;
        }
      }
      .bottom-content-right-bottom {
        margin-top: 1rem;
      }
    }
  }
}

.text-green {
  color: #67C23A;
  cursor: pointer;
}
</style>
